<div class="uk-width-large uk-margin-auto">
    <form class="uk-form-stacked"
          [formGroup]="loginInfo"
          (ngSubmit)="login()">
        <h2 class="uk-h2 uk-margin-medium-bottom">用户登录</h2>
        <div class="uk-margin">
            <div class="uk-form-label uk-flex uk-flex-between">
                <div class="uk-flex uk-flex-between">
                    <label for="username">
                        登录名
                    </label>
                    <div *ngIf="f.username.errors && f.username.touched"
                         class="uk-text-danger">
                        <span *ngIf="f.username.errors.required">请填写用户名</span>
                        <span *ngIf="f.username.errors.minlength">
                            最少{{f.username.errors.minlength.requiredLength}}个字符
                        </span>
                        <span *ngIf="f.username.errors.notExist">该用户不存在</span>
                    </div>
                </div>
            </div>
            <input class="uk-input"
                   formControlName="username"
                   id="username"
                   type="text"
                   [class.uk-form-danger]="f.username.errors && f.username.touched"
                   [class.uk-form-success]="!f.username.errors && f.username.touched"
                   placeholder="请输入用户名">
        </div>
        <div class="uk-margin">
            <div class="uk-form-label uk-flex uk-flex-between">
                <div class="uk-flex uk-flex-between">
                    <label for="password">
                        密码
                    </label>
                    <ul class="uk-subnav uk-margin-remove" uk-margin>
                        <li>
                            <a class="uk-link-text"
                               tabindex="-1"
                               routerLink="../request-reset">
                                忘了密码？
                            </a>

                        </li>
                        <li *ngIf="f.password.errors && f.password.touched">
                                <span class="uk-text-danger"
                                      *ngIf="f.password.errors.required">
                                    请填写密码
                                </span>
                        </li>
                    </ul>
                </div>
            </div>
            <input class="uk-input"
                   formControlName="password"
                   [class.uk-form-danger]="f.password.errors && f.password.touched"
                   [class.uk-form-success]="!f.password.errors && f.password.touched"
                   id="password"
                   type="password"
                   placeholder="密码">
        </div>
<!--        <label class="uk-margin">-->
<!--            <input class="uk-checkbox"-->
<!--                   formControlName="rememberMe"-->
<!--                   type="checkbox">-->
<!--            在这台电脑上记住我-->
<!--        </label>-->
        <div class="uk-margin-medium-top uk-text-center">
            <button type="submit"
                    [disabled]="!loginInfo.valid"
                    class="uk-button uk-button-primary uk-button-large uk-width-1-2">
                登录
            </button>
        </div>
        <p class="uk-text-center">
            还没有账号？
            <a routerLink="../register">
                去注册
            </a>
        </p>
    </form>
</div>
